<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';

import { onMounted } from 'vue';

import { DictEnum } from '@vben/constants';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { registerList } from '#/api/register/personal';
// import { getPopupContainer } from '@vben/utils';
import { renderDict } from '#/utils/render';

const props = defineProps<{
  employeeId: ID;
  showTitle?: boolean;
}>();

const gridOptions: VxeGridProps = {
  columns: [
    {
      title: '姓名',
      field: 'name',
      width: 120,
      fixed: 'left',
    },
    {
      title: '展会',
      field: 'exhibitionName',
      minWidth: 150,
    },
    {
      title: '届数',
      field: 'number',
      width: 90,
    },
    {
      title: '登记时间',
      field: 'createTime',
      width: 180,
    },
    {
      title: '预登记来源',
      field: 'sourceTrackName',
      width: 200,
    },
    {
      title: '观展形式',
      field: 'type',
      // width: 200,
      slots: { default: 'type' },
      showOverflow: false,
    },
    {
      title: '到场状态',
      field: 'sitStatus',
      width: 150,
      slots: {
        default: ({ row }) => {
          return renderDict(row.sitStatus, DictEnum.REGISTER_SIT_STATUS, true);
        },
      },
    },
  ],
  // height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: false,
  },
  toolbarConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async () => {
        if (!props.employeeId) {
          return { rows: [] };
        }
        const rows = await registerList({ employeeId: props.employeeId });
        return { rows };
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  id: 'audience-register-history-list',
  showOverflow: true,
};

const [BasicTable] = useVbenVxeGrid({
  gridOptions,
});

onMounted(() => {
  console.log('employeeId', props.employeeId);
});
</script>

<template>
  <BasicTable>
    <template #table-title>
      <main-title v-if="showTitle" text="参观登记列表" />
    </template>
    <template #type="{ row }">
      <div v-if="row.groupId">
        团体<span v-if="row.groupName">（{{ row.groupName }}）</span>
      </div>
      <span v-else>个人</span>
    </template>
  </BasicTable>
</template>
